<template>
  <XnDialog
    custom-class="add-scheme-dialog"
    :title="type === 'start' ? '开启考核' : '发起考核'"
    :visible.sync="selfVisible"
    @close="closeDialog">
    <el-scrollbar class="scheme-form-con">
      <el-form ref="schemeForm" :model="schemeForm" :rules="rules" size="small" label-width="140px">
        <el-form-item label="季度考核周期：" prop="gradeYear">
          <el-select v-model="schemeForm.gradeYear" placeholder="请选择" size="small" :disabled="type === 'start'">
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
          <el-select v-model="schemeForm.gradeQuarter" placeholder="请选择" size="small" :disabled="type === 'start'">
            <el-option
              v-for="item in quarterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核模板：" prop="modelId">
          <el-select
            v-model="schemeForm.modelId"
            placeholder="请选择"
            size="small"
            class="simple"
            @change="selectModel">
            <el-option
              v-for="item in modelOptions"
              :key="item.id"
              :label="item.templateName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="type === 'start'">
          <el-form-item label="考核开始时间：" prop="startTime">
            <el-date-picker
              v-model="schemeForm.startTime"
              type="datetime"
              placeholder="请选择开始日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :editable="false"
              :default-value="new Date()"></el-date-picker>
          </el-form-item>
          <el-form-item label="加分项截止时间：" prop="endTime" v-if="isBonus">
            <el-date-picker
              v-model="schemeForm.endTime"
              type="datetime"
              placeholder="请选择截止日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :editable="false"
              :default-value="new Date()"></el-date-picker>
          </el-form-item>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建日期：">{{ schemeForm.time | filterDate }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人：">{{ schemeForm.userName }}</el-form-item>
          </el-col>
        </el-row>
        <div v-if="type === 'start'" class="tips-box">注：开启考核前，请务必在纪实管理中进行当前考核季度总结的推送</div>
      </el-form>
    </el-scrollbar>
    <div class="btn-box">
      <el-button size="small" @click.stop="closeDialog">取消</el-button>
      <el-button size="small" type="primary" @click.stop="onFormSave('0')" v-if="type === 'start'">暂存</el-button>
      <el-button size="small" type="primary" @click.stop="onFormSave('1')">确定</el-button>
    </div>
  </XnDialog>
</template>
<script>
// import { cloneDeep } from 'lodash'
import XnDialog from '@com/xnDialog.vue'
import { formatDate } from '@utility/utility'
import { queryTemplateList } from '@api/modules/assessModule.js'

export default {
  name: 'AccountDialog',
  components: { XnDialog },
  emits: ['close', 'submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: '',
    },
    yearOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const checkTime = (rule, value, callback) => {
      if (!(this.schemeForm.gradeQuarter && this.schemeForm.gradeYear)) {
        return callback(new Error('请选择考核周期'))
      } else {
        callback()
      }
    }
    return {
      selfVisible: false,
      loading: false,
      schemeForm: {
        id: '',
        title: '',
        gradeYear: '',
        gradeQuarter: '',
        modelId: '',
        startTime: '',
        endTime: '',
        time: new Date(),
        userName: JSON.parse(localStorage.getItem('PSKH_USERINFO')).userName,
      },
      rules: {
        gradeYear: [{ validator: checkTime, required: true, trigger: 'change' }],
        modelId: [{ required: true, message: '请选择考核模板', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择考核开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择加分项截止时间', trigger: 'change' }],
      },
      gradeYear: '2023',
      quarterOptions: [
        {
          value: '1',
          label: '第一季度',
        },
        {
          value: '2',
          label: '第二季度',
        },
        {
          value: '3',
          label: '第三季度',
        },
        {
          value: '4',
          label: '第四季度',
        },
      ],
      modelOptions: [],
      isBonus: true,
    }
  },
  filters: {
    filterDate(val) {
      if (val) {
        return formatDate(new Date(val).toLocaleString(), 'yyyy-MM-dd hh:mm:ss')
      }
      return '-'
    },
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
    },
    info: {
      handler(obj) {
        if (obj && obj.id) {
          this.schemeForm.gradeQuarter = obj.quarter
          this.schemeForm.gradeYear = obj.year
          this.schemeForm.modelId = obj.templateId
          this.schemeForm.startTime = obj.startTime
          this.schemeForm.endTime = obj.extEndTime
          this.schemeForm.title = obj.title
          this.schemeForm.id = obj.id
          const arr = this.modelOptions.filter(item => {
            return item.id === obj.templateId
          })
          this.isBonus = arr[0] && arr[0].isNeedPlusMinusPoints === '1'
        }
      },
      deep: true,
      immediate: false,
    },
  },
  computed: {
    isEdit() {
      return !!this.info.id
    },
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取考核模板
    async initData() {
      const { status, data } = await queryTemplateList()
      if (status === 200 && data.length) {
        this.modelOptions = data
      } else {
        this.modelOptions = []
      }
    },
    closeDialog() {
      this.$refs.schemeForm && this.$refs.schemeForm.resetFields()

      this.schemeForm.id = ''
      this.schemeForm.gradeYear = ''
      this.schemeForm.gradeQuarter = ''
      this.schemeForm.modelId = ''
      this.schemeForm.startTime = ''
      this.schemeForm.endTime = ''

      this.selfVisible = false
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    resetParams(type) {
      const params = {
        status: this.type === 'start' && type === '1' ? '1' : '0',
        tenantId: localStorage.pskh_tenantId,
        year: this.schemeForm.gradeYear,
        quarter: this.schemeForm.gradeQuarter,
        templateId: this.schemeForm.modelId,
        assessType: 'QUARTER',
        id: this.info.id || '',
        title: this.info.title || '',
        startTime: this.info.id ? this.schemeForm.startTime : '',
        extEndTime: this.info.id ? this.schemeForm.endTime : '',
      }

      return params
    },
    onFormSave(type) {
      if (type === '0' && this.type === 'add') {
        const params = this.resetParams(type)
        this.$emit('submit', params)
        this.closeDialog()
      } else {
        this.$refs.schemeForm.validate(valid => {
          if (valid) {
            const params = this.resetParams(type)
            this.$emit('submit', params)
            this.closeDialog()
          }
        })
      }
    },
    selectModel() {
      const arr = this.modelOptions.filter(item => {
        return item.id === this.schemeForm.modelId
      })
      this.isBonus = arr[0] && arr[0].isNeedPlusMinusPoints === '1'
    },
  },
}
</script>
<style lang="scss" scoped>
.add-scheme-dialog {
  ::v-deep &.el-dialog {
    // margin-top: 5vh !important;
    width: 40%;
    // height: 50vh;
    max-height: 1200px;
    min-width: 640px;
    max-width: 840px;

    .scheme-form-con {
      height: calc(100% - 60px);
      display: flex;
      flex-direction: column;
    }

    .el-form {
      flex: 1;
      padding: 0 20px;

      .el-input,
      .el-select {
        width: auto;
      }
    }
    .tips-box {
      color: #d9001b;
      margin-bottom: 10px;
    }

    .btn-box {
      text-align: right;
      border-top: 1px solid #dedede;
      padding-top: 20px;
    }
  }
}
</style>
